<template>
  <div class="container">
    <h6>学员列表</h6>

    <div class="tablelist">
    <el-table
    ref="multipleTable"
    :data="stdarr"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">

    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="userid"
      label="用户ID"
      width="120">
    </el-table-column>
    <el-table-column
      prop="usernick"
      label="用户昵称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="memberphone"
      label="会员手机"
      width="120">
      <template slot-scope="scope">{{ scope.row.memberphone }}</template>
    </el-table-column>
    <el-table-column
      prop="pay"
      label="消费金额"
      width="120">
      <template slot-scope="scope">¥{{ scope.row.pay.toFixed(2) }}</template>
    </el-table-column>
    <el-table-column
      prop="orders"
      label="订单数量"
      width="120">
      <template slot-scope="scope">{{ scope.row.orders }}</template>
    </el-table-column>
    <el-table-column
      prop="memberlv"
      label="会员等级"
      width="120">
      <template slot-scope="scope">{{ scope.row.memberlv }}</template>
    </el-table-column>
    <el-table-column
      label="上次消费日期"
      width="150">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="disableuser"
      label="禁用账户"
      width="120">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.disableuser"
          active-color="#ea1a41"
          inactive-color="#b5b5b5">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="info"
          @click="handleDelete(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 
    </div>
  </div>
</template>

<script>
import { delStudentApi,batchDeleteApi } from '@/api/studentApi'
import eventBus from '@/utils/eventBus'
  export default {
    data() {
      return {
        // checkbox绑定选中值的数组
        multipleSelection:[],
      }
    },
    props:['stdarr'],
    mounted(){
      //监听  MybatchDel页面 批量删除点击 ==> 发送批量删除请求
      eventBus.$on('listbatchdelete',this.listbatchDel)
      //监听  MybatchDel页面 全选框状态改变 ==> 多选框状态改变
      eventBus.$on('checkall',(msg) =>{this.toggleSelection(msg)})
    },
    methods: {
      // 单个删除，发请求，将id传给后端，后端执行再通知前端，重新渲染页面
      handleDelete(id){
        delStudentApi({id:id}).then(res=>{
          if(res.code == 200){
            // 如果请求成功，通知父组件，刷新页面
            this.$emit('delEvent')
            this.$message({message: '删除成功!',center: true,type: 'success'});
          }
        })
      },
      // 批量删除
      listbatchDel(){
        // console.log('选中的数组长度为:',this.multipleSelection.length);
        var ids = this.multipleSelection.map(item=>item.id)
        if(ids.length == 0){  //如果多选框数组长度为0，批量删除按钮中断执行
          return
        }else{
            batchDeleteApi({ids:ids}).then(res=>{
              if(res.code == 200){
                this.$message({message: '批量删除成功!',center: true,type: 'success'});
                this.$emit('delEvent')
                // 删除成功，发送自定义事件，取消全选 传递参数0,就会取消全选
                this.changeStore(0) 
              }
            })
        }
      
      },
      // 全选/全不选  在msg为：true时执行 全选，为false执行 取消全选
      toggleSelection(msg) {
        if (msg) {
          this.$refs.multipleTable.toggleAllSelection();
          // console.log('全选');
        } else {
          this.$refs.multipleTable.clearSelection();
          // console.log('取消全选');
        }
      },
      // 多选框状态改变对应方法
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // 多选框状态发生改变时，调用状态改变函数，通知全选框更新，发送的参数是选中数组的长度
        this.changeStore(val.length)

      },
      // 全选框状态改变函数，发射一个自定义事件，通知全选框改变状态
      changeStore(i){
        eventBus.$emit('changeFlag',i)
        // console.log('list页面发布的changeStore函数触发');
      },


      //编辑方法
      handleEdit(val){
        // 把数据传给弹框,打开弹框
        this.$emit('editOpenDialog',val)
      }

      // 发起请求获取数据
      // initGetStudent(){
        // 使用封装好的请求函数进行请求
        // server({
        //   // https://api.i-lynn.cn
        //   // 公共的url地址提取出来放urlbase中
        //   //鉴于地址会更改，工具无需改动，将需要更改的部分移至api统一管理
        //   url:'/college',
        //   timeout:5000,
        //   method:'get',
        //   params:{id:666}
        // }).then(res=>{console.log(res);})
        //   getStudentData({id:666}).then(res=>{console.log(res);})
        // }
    },
  
  }
</script>

<style lang="less" scoped>
h6{
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  line-height: 17px;
  font-weight: bold;
  text-align: left;
  font-size: 16px;
  padding: 18px 0 17px 30px;
  background-color: #fff;
  margin-top: 20px;
  font-family: Microsoft YaHei;
}
      // 表格样式
  .el-table {
  /deep/ thead {
    font-weight: bold;
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #333333;
  }
  /deep/ tbody {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  /deep/ .el-table__cell {
    text-align: center;
  }
}
// 全选框的样式
/deep/.tablelist .el-table .el-table__header-wrapper .el-table__header .el-table-column--selection .cell{
  position: absolute;
  left: 0px;
  top: 50px;
  z-index: 1;
}
</style>